<template>
    <view class="facility pl-30 pr-30 pt-28">
        <view class="ft-46 c-m bold pl-6">{{ roomTypeInfoDetailResp.nameZh || '' }}</view>
        <!-- 房间常规设施 -->
        <view class="space-between facility-list ft-26 t-3 p-20 mt-12">
            <view class="facility-list-item column align-center">
                <hj-image
                    src="icons-01.png"
                    :height="iconSize"
                    :width="iconSize"
                    mode="aspectFit"
                />
                <text class="mt-8">{{ roomTypeInfoDetailResp.roomArea || '0' }}㎡</text>
            </view>
            <view class="facility-list-item column align-center">
                <hj-image
                    src="icons-02.png"
                    :height="iconSize"
                    :width="iconSize"
                    mode="aspectFit"
                />
                <text class="mt-8">{{ roomTypeInfoDetailResp.floor || '1' }}层</text>
            </view>
            <view
                class="facility-list-item column align-center"
                v-if="hotelRoomFacilityResp.isWifi"
            >
                <hj-image
                    src="icons-03.png"
                    :height="iconSize"
                    :width="iconSize"
                    mode="aspectFit"
                />
                <text class="mt-8">免费WIFI</text>
            </view>
            <view class="facility-list-item column align-center">
                <hj-image
                    src="icons-04.png"
                    :height="iconSize"
                    :width="iconSize"
                    mode="aspectFit"
                />
                <text class="mt-8">
                    {{ windowType[roomTypeInfoDetailResp.windowType] || '有窗' }}
                </text>
            </view>
            <view class="facility-list-item column align-center">
                <hj-image
                    src="icons-06.png"
                    :height="iconSize"
                    :width="iconSize"
                    mode="aspectFit"
                />
                <text class="mt-8">
                    {{ smokingAllowed[roomTypeInfoDetailResp.smokingAllowed] || '部分禁烟' }}
                </text>
            </view>
        </view>
        <!-- 早餐以及床铺信息 -->
        <view class="facility-info">
            <view class="align-center facility-info-item">
                <view class="facility-info-item-left column center">
                    <hj-image
                        src="icons-07.png"
                        :height="iconSize"
                        :width="iconSize"
                        mode="aspectFit"
                    />
                </view>
                <view class="flex-auto facility-info-item-in">
                    <view>
                        <text
                            v-for="(item, index) in roomTypeInfoDetailResp.bedTypeList"
                            :key="index"
                        >
                            {{ item.bedNum }}张{{ item.bedType }}{{ item.bedWidth }}米
                        </text>
                    </view>
                    <view>
                        加床：{{ hotelPolicy.isExtraBed ? '该房型可加床' : '该房型不可加床' }}
                    </view>
                </view>
            </view>
            <view class="align-center facility-info-item">
                <view class="facility-info-item-left column center">
                    <hj-image
                        src="icons-26.png"
                        :height="iconSize"
                        :width="iconSize"
                        mode="aspectFit"
                    />
                </view>
                <view class="flex-auto facility-info-item-in" v-if="hotelPolicy.isBreakfast">
                    <view>每日{{ roomTypeInfoDetailResp.breakfastCount || 0 }}份早餐</view>
                    <view>
                        时间：早上{{ formatDate(hotelPolicy.breakfastStart, '07:30') }}-{{
                            formatDate(hotelPolicy.breakfastEnd, '09:30')
                        }}
                    </view>
                </view>
            </view>
        </view>
        <block v-if="showMore">
            <!-- 洗漱用品 -->
            <view
                class="facility-info"
                v-if="
                    hotelRoomFacilityResp.isToothbrush ||
                    hotelRoomFacilityResp.isToothpaste ||
                    hotelRoomFacilityResp.isShowerGel ||
                    hotelRoomFacilityResp.isShampoo ||
                    hotelRoomFacilityResp.isShowerCap ||
                    hotelRoomFacilityResp.isComb
                "
            >
                <view class="align-center facility-info-item">
                    <view class="facility-info-item-left column center">
                        <hj-image
                            src="icons-09.png"
                            :height="iconSize"
                            :width="iconSize"
                            mode="aspectFit"
                        />
                        <text class="text mt-8">洗漱用品</text>
                    </view>
                    <view class="flex-auto facility-info-item-in facility-table">
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isToothbrush"
                            >牙刷</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isToothpaste"
                            >牙膏</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isShowerGel"
                            >沐浴露</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isShampoo"
                            >洗发水</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isShowerCap"
                            >浴帽</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isComb"
                            >梳子</view
                        >
                    </view>
                </view>
            </view>
            <!-- 客房布局以及家具 -->
            <view
                class="facility-info"
                v-if="
                    hotelRoomFacilityResp.isSofa ||
                    hotelRoomFacilityResp.isWardrobe ||
                    hotelRoomFacilityResp.isDesk ||
                    hotelRoomFacilityResp.isDiningTable ||
                    hotelRoomFacilityResp.isWallDecoration
                "
            >
                <view class="align-center facility-info-item">
                    <view class="facility-info-item-left column center">
                        <hj-image
                            src="icons-11.png"
                            :height="iconSize"
                            :width="iconSize"
                            mode="aspectFit"
                        />
                        <text class="text mt-8">布局和家具</text>
                    </view>
                    <view class="flex-auto facility-info-item-in facility-table">
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isSofa"
                            >沙发</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isWardrobe"
                            >衣柜/衣橱</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isDesk"
                            >书桌</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isDiningTable"
                            >餐桌</view
                        >
                        <view
                            class="facility-table-cell"
                            v-if="hotelRoomFacilityResp.isWallDecoration"
                            >挂墙装饰画/字画</view
                        >
                    </view>
                </view>
            </view>
            <!-- 网络通讯 -->
            <view
                class="facility-info"
                v-if="hotelRoomFacilityResp.isWifi || hotelRoomFacilityResp.isTelephone"
            >
                <view class="align-center facility-info-item">
                    <view class="facility-info-item-left column center">
                        <hj-image
                            src="icons-13.png"
                            :height="iconSize"
                            :width="iconSize"
                            mode="aspectFit"
                        />
                        <text class="text mt-8">网络通讯</text>
                    </view>
                    <view class="flex-auto facility-info-item-in facility-table">
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isWifi"
                            >客房WIFI</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isTelephone"
                            >电话</view
                        >
                    </view>
                </view>
            </view>
            <!-- 食品饮品 -->
            <view
                class="facility-info"
                v-if="
                    hotelRoomFacilityResp.isTeaBag ||
                    hotelRoomFacilityResp.isBottledWater ||
                    hotelRoomFacilityResp.isKettle
                "
            >
                <view class="align-center facility-info-item">
                    <view class="facility-info-item-left column center">
                        <hj-image
                            src="icons-14.png"
                            :height="iconSize"
                            :width="iconSize"
                            mode="aspectFit"
                        />
                        <text class="text mt-8">食品饮品</text>
                    </view>
                    <view class="flex-auto facility-info-item-in facility-table">
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isTeaBag"
                            >茶包</view
                        >
                        <view
                            class="facility-table-cell"
                            v-if="hotelRoomFacilityResp.isBottledWater"
                            >免费瓶装水</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isKettle"
                            >电热水壶</view
                        >
                    </view>
                </view>
            </view>
            <!-- 卫浴设施 -->
            <view
                class="facility-info"
                v-if="
                    hotelRoomFacilityResp.isPrivateBathroom ||
                    hotelRoomFacilityResp.isBathroom ||
                    hotelRoomFacilityResp.isHairDryer ||
                    hotelRoomFacilityResp.isBathRobe ||
                    hotelRoomFacilityResp.isTowel ||
                    hotelRoomFacilityResp.isBathTowel ||
                    hotelRoomFacilityResp.isHotWater24h ||
                    hotelRoomFacilityResp.isSlippers
                "
            >
                <view class="align-center facility-info-item">
                    <view class="facility-info-item-left column center">
                        <hj-image
                            src="icons-15.png"
                            :height="iconSize"
                            :width="iconSize"
                            mode="aspectFit"
                        />
                        <text class="text mt-8">卫浴设施</text>
                    </view>
                    <view class="flex-auto facility-info-item-in facility-table">
                        <view
                            class="facility-table-cell"
                            v-if="hotelRoomFacilityResp.isPrivateBathroom"
                            >私人浴室</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isBathroom"
                            >私人卫生间</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isHairDryer"
                            >吹风机</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isBathRobe"
                            >浴衣</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isTowel"
                            >毛巾</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isBathTowel"
                            >浴巾</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isHotWater24h"
                            >24小时热水</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isSlippers"
                            >拖鞋</view
                        >
                    </view>
                </view>
            </view>
            <!-- 客房设施 -->
            <view
                class="facility-info"
                v-if="
                    hotelRoomFacilityResp.isAirCondition ||
                    hotelRoomFacilityResp.isCurtain ||
                    hotelRoomFacilityResp.isQuilt ||
                    hotelRoomFacilityResp.isBlanket
                "
            >
                <view class="align-center facility-info-item">
                    <view class="facility-info-item-left column center">
                        <hj-image
                            src="icons-16.png"
                            :height="iconSize"
                            :width="iconSize"
                            mode="aspectFit"
                        />
                        <text class="text mt-8">客房设施</text>
                    </view>
                    <view class="flex-auto facility-info-item-in facility-table">
                        <view
                            class="facility-table-cell"
                            v-if="hotelRoomFacilityResp.isAirCondition"
                            >空调</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isCurtain"
                            >窗帘</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isQuilt"
                            >床具:鸭绒被</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isBlanket"
                            >床具:毯子或者被子</view
                        >
                    </view>
                </view>
            </view>
            <!-- 科技媒体 -->
            <view class="facility-info" v-if="hotelRoomFacilityResp.isTv">
                <view class="align-center facility-info-item">
                    <view class="facility-info-item-left column center">
                        <hj-image
                            src="icons-17.png"
                            :height="iconSize"
                            :width="iconSize"
                            mode="aspectFit"
                        />
                        <text class="text mt-8">科技媒体</text>
                    </view>
                    <view class="flex-auto facility-info-item-in facility-table">
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isTv"
                            >电视机</view
                        >
                    </view>
                </view>
            </view>
            <!-- 便利设施 -->
            <view
                class="facility-info"
                v-if="
                    hotelRoomFacilityResp.isClothesRack ||
                    hotelRoomFacilityResp.isPowerSocket ||
                    hotelRoomFacilityResp.isPower220v ||
                    hotelRoomFacilityResp.isMahjongRoom
                "
            >
                <view class="align-center facility-info-item">
                    <view class="facility-info-item-left column center">
                        <hj-image
                            src="icons-18.png"
                            :height="iconSize"
                            :width="iconSize"
                            mode="aspectFit"
                        />
                        <text class="text mt-8">便利设施</text>
                    </view>
                    <view class="flex-auto facility-info-item-in facility-table">
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isClothesRack"
                            >衣架</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isPowerSocket"
                            >单一规格电源插座</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isPower220v"
                            >220V电压插座</view
                        >
                        <view class="facility-table-cell" v-if="hotelRoomFacilityResp.isMahjongRoom"
                            >棋牌室</view
                        >
                    </view>
                </view>
            </view>
        </block>
        <view class="more center pb-24 ft-26 t-6" @click="showMore = !showMore">
            <text class="mr-8">{{ showMore ? '收起' : '更多设施' }}</text>
            <hj-image
                :isLoad="false"
                :src="showMore ? 'icons-20.png' : 'icons-19.png'"
                height="26rpx"
                width="26rpx"
                mode="aspectFit"
            />
        </view>
    </view>
</template>

<script setup>
/**
 * @description 房间设施
 * @author yinzhi
 * @date 2025-05
 */
import { ref, defineComponent, computed } from 'vue'
import dayjs from 'dayjs/esm/index'
defineComponent({
    name: 'RoomFacility'
})
const props = defineProps({
    info: {
        type: Object,
        default: () => {}
    }
})

const hotelRoomFacilityResp = computed(() => props.info.hotelRoomFacilityResp || {}) //设施服务
const hotelPolicy = computed(() => props.info.hotelPolicy || {}) //酒店政策
const roomTypeInfoDetailResp = computed(() => props.info.roomTypeInfoDetailResp || {}) //房型相关信息

const windowType = {
    0: '有窗',
    1: '部分有窗',
    2: '无窗'
}

const smokingAllowed = {
    0: '禁烟吸烟',
    1: '可吸烟',
    2: '部分禁烟'
}

// 图标大小
const iconSize = ref('46rpx')
// 是否显示更多设施
const showMore = ref(false)

// 时间格式处理
const formatDate = (date, defaultDate) => {
    try {
        const today = dayjs().format('YYYY-MM-DD')
        return dayjs(`${today} ${date}`).format('HH:mm')
    } catch (e) {
        console.error('时间格式转换失败:', e)
        return defaultDate
    }
}
</script>

<style scoped lang="scss">
.facility {
    border-radius: 40rpx 40rpx 0 0;
    background: $uni-bg-color;
    margin-top: -40rpx;
    position: relative;
    z-index: 30;
    box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.02);
    &-info {
        border-top: 1px solid $uni-bg-color-hover;
        padding: 15rpx 0;
        &-item {
            padding: 20rpx 0 20rpx 10rpx;
            &-left {
                width: 100rpx;
                padding: 0 15rpx;
                .text {
                    line-height: 1.2;
                }
            }
            &-in {
                padding-left: 30rpx;
                font-size: 28rpx;
                color: #333;
                line-height: 1.5;
            }
            .facility-table {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                &-cell {
                    width: 49%;
                }
            }
        }
    }
}
</style>
